<template>
  <el-row class="echarts_box">
    <div class="box_header">
      <el-col :span="16" class="header_left">{{ title }}</el-col>
      <div class="header_right">
        <span class="box_update">更新</span
        ><img src="@/assets/images/header/icon_more.png" alt="" />
      </div>
    </div>
    <el-col class="header_body">
      <div class="tips">
        总{{ showTitle ? "任务" : "" }}数：<span style="font-weight: bold">{{
          taskArray[0].total_sum
        }}</span>
        {{ hideWord ? "" : "家" }}
      </div>
      <div :id="taskArray[0].id" style="height: 230px; margin-top: -50px"></div>
      <el-row
        class="row_item"
        v-for="item in taskArray[0].data_array"
        :key="item.id"
      >
        <el-col :span="6">
          <div class="item">{{ item.area }}</div>
        </el-col>
        <el-col :span="6">
          <div class="item">
            {{ item.status }}<span>{{ item.status_num }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item">
            {{ item.process }}<span>{{ item.process_num }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item">{{ item.finish_rate }}</div>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "echarts",
  props: {
    title: {
      type: String,
      default: ""
    },
    showTitle: {
      type: Boolean,
      default: false
    },
    hideWord: {
      type: Boolean,
      default: false
    },
    taskArray: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      myEcharts1: null,
      myEcharts2: null,
      myEcharts3: null,
      echartsData: []
    };
  },
  computed: {
    finishColor() {
      let color;
      if (this.taskArray[0].id === "id_1") {
        color = [
          { offset: 0, color: "#8E7DFF" },
          { offset: 1, color: "#CDA2FF" }
        ];
      } else if (this.taskArray[0].id === "id_2") {
        color = [
          { offset: 0, color: "#95EEA6" },
          { offset: 1, color: "#3ED28F" }
        ];
      } else if (this.taskArray[0].id === "id_3") {
        color = [
          { offset: 0, color: "#83A0FF" },
          { offset: 1, color: "#5A86FF" }
        ];
      }
      return color;
    },
    no_finish_color() {
      let no_finish_color;
      if (this.taskArray[0].id === "id_1") {
        no_finish_color = [
          { offset: 0, color: "#FFC4A7" },
          { offset: 1, color: "#FF8B6A" }
        ];
      } else if (this.taskArray[0].id === "id_2") {
        no_finish_color = [
          { offset: 0, color: "#FFD85B" },
          { offset: 1, color: "#FFBE62" }
        ];
      } else if (this.taskArray[0].id === "id_3") {
        no_finish_color = [
          { offset: 0, color: "#FFB6B7" },
          { offset: 1, color: "#FF717C" }
        ];
      }
      return no_finish_color;
    }
  },
  mounted() {
    this.echartsInit();
    window.onresize = () => {
      console.log(this.myEcharts3)
      this.myEcharts1 && this.myEcharts1.resize();
      this.myEcharts2 && this.myEcharts2.resize();
      this.myEcharts3 && this.myEcharts3.resize();
    };
  },
  methods: {
    echartsInit() {
      if (this.taskArray[0].id === "id_1") {
        this.myEcharts1 = echarts.init(document.getElementById(`${this.taskArray[0].id}`));
      } else if (this.taskArray[0].id === "id_2") {
        this.myEcharts2 = echarts.init(document.getElementById(`${this.taskArray[0].id}`));
      } else if (this.taskArray[0].id === "id_3") {
        this.myEcharts3 = echarts.init(document.getElementById(`${this.taskArray[0].id}`));
      }

      let option = {
        title: {
          text: `${this.taskArray[0].chars_title}\n${this.taskArray[0].rate}`,
          x: "center",
          y: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c}"
        },
        series: [
          {
            name: "接入率",
            type: "pie",
            radius: ["50%", "60%"],
            labelLine: {
              show: true,
              length: 20,
              length2: 30
            },
            center: ["50%", "50%"],
            startAngle: 360,
            data: [
              {
                value: 560,
                name: this.taskArray[0].already_finish,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    this.finishColor
                  )
                },
                label: {
                  show: true,
                  formatter: "{a|{b}}\n{hr|}",
                  rich: {
                    hr: {
                      backgroundColor: "t",
                      borderRadius: 3,
                      width: 3,
                      height: 3,
                      padding: [3, 3, 0, -12]
                    },
                    a: {
                      padding: [-30, 15, -20, 15],
                      color: "#8C7CFF"
                    }
                  }
                }
              },
              {
                value: 45,
                name: this.taskArray[0].no_finish,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    this.no_finish_color
                  )
                },
                label: {
                  show: true,
                  position: "outside",
                  align: "left",
                  formatter: "{a|{b}}\n{hr|}",
                  rich: {
                    hr: {
                      backgroundColor: "t",
                      borderRadius: 3,
                      width: 3,
                      height: 3,
                      padding: [3, 3, 0, -12]
                    },
                    a: {
                      padding: [-30, 150, -20, 15],
                      color: "#FF8A69"
                    }
                  }
                }
              }
            ]
          }
        ]
      };
      if (this.taskArray[0].id === "id_1") {
        this.myEcharts1.setOption(option);
      } else if (this.taskArray[0].id === "id_2") {
        this.myEcharts2.setOption(option);
      } else if (this.taskArray[0].id === "id_3") {
        this.myEcharts3.setOption(option);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.echarts_box {
  width: 100%;
  height: 489px;
  margin-bottom: 20px;
  margin-right: 25px;
  &:nth-child(3){
    margin-right: 0 !important;
  }

  .box_header {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px;
    padding: 0 20px;
    background: linear-gradient(90deg, #6aa5ff 0%, #9fc9fc 100%);
    color: #fff;

    .header_right {
      display: flex;
      align-items: center;

      .box_update {
        margin-right: 20px;
        font-size: 14px;
      }
    }
  }

  .header_body {
    height: 433px;
    background-color: #fff;

    .tips {
      font-size: 20px;
      color: #3c4c70;
      padding: 20px 0 0 22px;
    }

    .row_item {
      height: 32px;
      margin: 0 20px;
      font-size: 14px;
      text-align: center;

      .item {
        border: 1px solid #e5edf5;
      }

      span {
        color: #4d7de9;
        text-decoration: underline;
      }
    }
  }
}
</style>
